<!DOCTYPE html>
<!-- saved from url=(0035)http://www.html-js.com/article/3279 -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <link rel="Shortcut Icon" href="http://htmljs.b0.upaiyun.com//images/logo.ico?123">
    <link href="http://htmljs.b0.upaiyun.com//images/logo.ico?123" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/main.css" type="text/css">
    <link rel="stylesheet" href="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/prettify.css" type="text/css">
    <link rel="stylesheet" href="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/glyphicons.css" type="text/css">
    <script src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/jquery.js"></script>
    <script src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/htmljs.js"></script>
    <script src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/prettify.js"></script><meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://htmljs.b0.upaiyun.com//images/icon.png" rel="apple-touch-icon">
    <meta name="keywords" content="前端, 前端开发, web前端, web前端开发, 前端开发工程师, 前端开发攻城师,设计, 开发, 前端资源, CSS, JavaScript, Ajax, jQuery, html,html5,css3,浏览器兼容, 前端开发工具, 前端招聘, jQuery API, CSS整形和优化工具 , JS压缩工具 , JS格式化工具 , CSS参考手册 ,HTML参考手册 , 多重搜索 , nodejs , node , boostrap , sublime">
    <meta name="baidu-site-verification" content="OnKVgNu37S">
    <script>if($.browser.msie<8){alert("请不要使用ie浏览本站！本站不支持ie10以下浏览器。")}</script>
    <title>【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖</title><meta name="description" content="1.doctype是干啥子的？？Whatdoesadoctypedo?&lt;!DOCTYPE&gt;它是指示web浏览器关于页面使用哪个HTML版本进行编写的指令。注意以下几点：&lt;!DOCTY">
    <style>
      #bdshare a{}
      .ad-blank{opacity:0.6;}
    </style>
    <script src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/bootstrap-tooltip.js"></script>
    <script src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/bootstrap-scrollspy.js"></script>
    <script src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/tips.js"></script>
    <link rel="stylesheet" href="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/tips.css" type="text/css">
  <link href="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/bdsstyle.css" rel="stylesheet" type="text/css"><script src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/logger.js"></script></head>
  <body id="article"><iframe frameborder="0" style="display: none;" src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/saved_resource.html"></iframe>
    <div id="header">
      <div class="wrapper clearfix"><a href="http://www.html-js.com/" title="前端乱炖" class="logo"><span class="dun">炖</span></a>
        <div class="navbar navbar-inverse">
          <div class="navbar-inner">
            <div class="container">
              <div class="nav-collapse collapse">
                <ul class="nav left-nav">
                  <li pageid="0" class=""><a href="http://www.html-js.com/"><i class="icon-home"></i>首页</a></li>
                  <li pageid="1" class="active"><a href="http://www.html-js.com/article"><i class="icon-book-open"></i>专栏</a></li>
                  <li pageid="7" class=""><a href="http://www.html-js.com/qa"><i class="icon-lightbulb"></i>问答</a></li>
                  <li pageid="10" class=""><a href="http://www.html-js.com/topic"><i class="icon-group"></i>讨论区</a></li>
                  <li pageid="20" class="hidden "><a href="http://www.html-js.com/talk"><i class="icon-conversation"></i>实时讨论</a></li>
                  <li pageid="15" class="hidden "><a href="http://www.html-js.com/blog"><i class="icon-sampler"></i>博集</a></li>
                  <li pageid="8" class="hidden "><a href="http://www.html-js.com/tag">标签</a></li>
                  <li pageid="2" class="hidden "><a href="http://www.html-js.com/job"><i class="icon-leaf"></i>招聘</a></li>
                  <li pageid="2" class=""><a href="http://www.html-js.com/cards"><i class="icon-nameplate"></i>花名册</a></li>
                  <li pageid="101" class=""><a href="http://www.jiankongbao.com/labs/http">免费性能测试</a></li>
                  <li class="search">
                    <form action="http://www.html-js.com/search" method="get" style="margin:0;"><i class="icon-search"></i>
                      <input id="keyword" type="text" name="q" placeholder="搜索全站、站外内容" class="span2 input-large">
                    </form>
                  </li>
                  <li pageid="6" class="hidden "><a href="http://www.html-js.com/book">免费送书</a></li>
                </ul>
                <ul class="right-nav">
                  <li><a href="http://www.html-js.com/user/login?redirect=%2Farticle%2F3279">登录</a></li>
                  <li><a href="http://www.html-js.com/talk"><i class="icon-conversation"></i>在线聊天</a></li>
                  <li class="hidden sub-trigger"><a>其他功能</a>
                    <ul class="sub-menu hidden">
                      <li pageid="5" class=""><a href="http://www.html-js.com/act">活动</a></li>
                      <li pageid="9" class=""><a href="http://www.html-js.com/tools"><i class="icon-classic-hammer hidden"></i>常用工具</a><span class="my-favs"></span></li>
                      <li><a href="http://www.html-js.com/talk">
                           
                          实时讨论</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        $(".sub-trigger").mouseenter(function(){
          $(".sub-menu",this).removeClass("hidden")
          }).mouseleave(function(){
          $(".sub-menu",this).addClass("hidden")
          })
        })       
    </script>
    <div id="content" class="clearfix">
      <div class="daen"></div>
      <ul class="breadcrumb hidden">
        <li><a href="http://www.html-js.com/">首页</a><span class="divider">/</span></li>
        <li><a href="http://www.html-js.com/article">所有专栏</a><span class="divider">/</span></li>
        <li><a href="http://www.html-js.com/article/column/4623">记录我的前端成长之路！</a><span class="divider">/</span></li>
        <li class="active"><span>【基础性】HTML面试问题</span></li>
      </ul>
      <div class="title">
        <div class="wrapper">
          <div style="font-size: 30px;line-height:50px;" href="http://p.html-js.com/article/3279" title="【基础性】HTML面试问题" rel="bookmark" class="38">【基础性】HTML面试问题</div>
          <div class="info">
            <div class="line"><span class="author vcard item"><a rel="author" href="http://www.html-js.com/user/7498" class="value url fn">体贴的小困</a> 发布在<a href="http://www.html-js.com/article/column/4623" class="value">记录我的前端成长之路！</a></span><span class="item">2015年11月18日</span><span class="item"><span class="index">view：</span><span class="value">1535</span></span><span style="margin-right:10px;color:#999;" class="item">HTML5</span><span style="margin-right:10px;color:#999;" class="item">CSS</span>
            </div>
          </div>
        </div>
      </div>
      <div class="content-wapper">
        <div class="content">
          <div class="left"><a href="http://gold.xitu.io/extension/?utm_source=htmljs&amp;utm_medium=banner&amp;utm_content=juhe&amp;utm_campaign=q3_extension" style="margin-top:20px;opacity:1;display:block;background: #eee;margin: 10px 0;cursor: pointer;"> <img src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/1473249478180-b6709d870b90063575966bf1bcd8dee4.png"></a><a href="https://zhuanlan.zhihu.com/p/23538432" style="margin-top:20px;opacity:1;display:block;background: #eee;margin: 10px 0;cursor: pointer;"> <img src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/1478698438615-65e11a061e85c4b9367a6477bb08a6ba.png"></a>
            <div style="margin-top:20px;" class="alert">在文章任何区域双击击即可给文章添加【评注】！浮到评注点上可以查看详情。<div class="checkbox" style="float:right;line-height:40px;color:#333;padding-top:3px;"><label><input type="checkbox" id="hide_tip">隐藏标注</label></div></div>
            <article id="post-3279" style="overflow:hidden;" class="post">
              <div class="wrapper">
                <div style="padding-top:0;" class="entry-content"><!--<a href="http://passport.lagou.com/landingPage.html?utm_source=AD__html-js&amp;utm_medium=banner&amp;utm_campaign=lp" class="ad-blank"></a><img src="http://htmljs.b0.upaiyun.com/uploads/1439192041460-7786e01e91744693f0cc2c15f7ce9ab3.png">--><h2>1. doctype是干啥子的？？ What does a <code class=" language-javascript">doctype</code> do?</h2>

<p><code class=" language-javascript"><span class="token operator">&lt;</span><span class="token operator">!</span>DOCTYPE<span class="token operator">&gt;</span></code><strong>它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。</strong></p>

<p>注意以下几点：</p>

<ol>
<li><code class=" language-javascript"><span class="token operator">&lt;</span><span class="token operator">!</span>DOCTYPE<span class="token operator">&gt;</span></code>  声明不是 HTML 标签；</li>
<li><code class=" language-javascript"><span class="token operator">&lt;</span><span class="token operator">!</span>DOCTYPE<span class="token operator">&gt;</span></code> 声明必须是 HTML 文档的第一行，位于 &lt;html&gt; 标签之前。</li>
<li><code class=" language-javascript"><span class="token operator">&lt;</span><span class="token operator">!</span>DOCTYPE<span class="token operator">&gt;</span></code>  不区分大小写</li>
<li>HTML 5的doctype声明是<code class=" language-javascript"><span class="token operator">&lt;</span><span class="token operator">!</span>DOCTYPE html<span class="token operator">&gt;</span></code></li>
</ol>

<p>在 HTML 4.01 中，&lt;!DOCTYPE&gt; 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。</p>

<h2>2.标准模式和怪异模式有什么区别？ What’s the difference between standards mode and quirks mode?</h2>

<p>先说一下在什么情况下，用那种模式：</p>

<ol>
<li>标准模式：在现有有doctype声明的网页，绝大多数是采用strict mode进行解析的。</li>
<li>怪异模式：浏览器对没有进行doctype声明的网页进行怪异模式解析。</li>
</ol>

<p><strong>两者的区别</strong><a href="http://htmljs.b0.upaiyun.com/uploads/1447847078679-d13a9b1cadb6c5eb881c73c015943cb0.png">这篇文章大神将的特别细致</a></p>

<ul>
<li>盒模型的解析上</li>
</ul>

<p>在strict mode中 ：<strong>width是内容宽度</strong> </p>

<p>在quirks mode中 ：<strong>width则是元素的实际宽度</strong> ，而内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)</p>

<ul>
<li>图片元素垂直对齐方式</li>
</ul>

<p>在strict mode中 ：vertical-align 属性默认取值为 baseline</p>

<p>在quirks mode中 ：vertical align 属性默认为 bottom，因此，在图片底部会有几像素的空间。</p>

<ul>
<li><code class=" language-javascript"><span class="token operator">&lt;</span>table<span class="token operator">&gt;</span></code>元素中的字体</li>
</ul>

<p>Quirks Mode 下，对于 table 元素，字体的某些属性将不会从 body 或其他封闭元素继承到 table 中，特别是 font-size 属性。</p>

<ul>
<li>内联元素的尺寸</li>
</ul>

<p>在 Standards Mode 下，non-replaced inline 元素无法自定义大小，而在  Quirks Mode 下，定义这些元素的 width 和 height 属性，能够影响该元素显示的大小尺寸。</p>

<ul>
<li>元素的百分比高度</li>
</ul>

<p>当一个元素使用百分比高度时，在 Standards Mode 下，高度取决于内容的变化，而在 Quirks Mode 下，百分比高度则被正确应用。</p>

<ul>
<li>元素溢出的处理</li>
</ul>

<p>在 Standard Mode 下，overflow 取默认值 visible，即溢出可见，这种情况下，溢出内容不会被裁剪，呈现在元素框外。而在 Quirks Mode 下，该溢出被当做扩展 box 来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容。</p>

<h2>3.HTML和XHTML的区别是什么？ What’s the difference between HTML and XHTML?</h2>

<p>最主要的不同：</p>

<ul>
<li>XHTML可以理解为html+xml，就是用xml的语法来规范html。</li>
<li>XHTML 元素必须被正确地嵌套。</li>
<li>XHTML 元素必须被关闭。</li>
<li>标签名必须用小写字母。</li>
<li>XHTML 文档必须拥有根元素。</li>
</ul>

<h2>4.Are there any problems with serving pages as <code class=" language-javascript">application<span class="token operator">/</span>xhtml<span class="token operator">+</span>xml</code>?</h2>

<p>首先<code class=" language-javascript">application<span class="token operator">/</span>xhtml<span class="token operator">+</span>xml</code>是MIME类型；</p>

<p>　　MIME的英文全称是 Multipurpose Internet Mail Extensions（多功能 Internet 邮件扩充服务），它是一种多用途网际邮件扩充协议，在1992年最早应用于电子邮件系统，但后来也应用到浏览器。</p>

<p>　　text/html,application/xhtml+xml,application/xml 都是 MIME 类型，也可以称为媒体类型和内容类型，斜杠前面的是 type（类型），斜杠后面的是 subtype（子类型）；type 指定大的范围，subtype 是 type 中范围更明确的类型，即大类中的小类。</p>

<p>　　Text：用于标准化地表示的文本信息，文本消息可以是多种字符集和或者多种格式的；</p>

<p>　　text/html表示 html 文档；</p>

<p>　　Application：用于传输应用程序数据或者二进制数据；</p>

<p>　　application/xhtml+xml表示 xhtml 文档；</p>

<p>　　application/xml表示 xml 文档。</p>

<p>问题是。。。老版本浏览器不兼容。。这个部分会再查查。</p>

<p>后面部分明天更新</p>

<h2>5. How do you serve a page with content in multiple languages?如何使页面支持多种语言？</h2>

<p>两种方法：</p>

<p>1，静态：就是为每种语言分别准备一套页面文件，要么通过文件后缀名来区分不同语言，要么通过子目录来区分不同语言。
2，动态：站点内所有页面文件都是动态页面文件（PHP，ASP等）而不是静态页面文件，在需要输出语言文字的地方统一采用语言变量来表示，这些语言变量可以根据用户选择不同的语言赋予不同的值，从而能够实现在不同的语言环境下输出不同的文字。</p>

<h2>6. What kind of things must you be wary of when design or developing for multilingual sites?当你设计开发多语言的网页时，有什么东西是你必须注意的？</h2>

<h2>7.What are <code class=" language-javascript">data<span class="token operator">-</span></code> attributes good for?data属性的作用是什么？</h2>

<p><strong>data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状</strong></p>

<p>data-* 属性用于存储页面或应用程序的私有自定义数据。</p>

<p>data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。</p>

<p>存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。</p>

<p>data-* 属性包括两部分：</p>

<p>属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
    属性值可以是任意字符串</p>

<p>注释：用户代理会完全忽略前缀为 “data-” 的自定义属性</p>

<h2>  Describe the difference between a cookie, sessionStorage and localStorage.请描述 cookies、sessionStorage 和 localStorage 的区别。</h2>

<p><a href="http://segmentfault.com/a/1190000002723469">异同详解，点我点我</a></p>

<h2>Describe the difference between <code class=" language-javascript"><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token operator">&lt;</span>script async<span class="token operator">&gt;</span> and <span class="token operator">&lt;</span>script defer<span class="token operator">&gt;</span><span class="token punctuation">.</span></code>请解释 <code class=" language-javascript"><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>、<span class="token operator">&lt;</span>script async<span class="token operator">&gt;</span></code> 和 <code class=" language-javascript"><span class="token operator">&lt;</span>script defer<span class="token operator">&gt;</span></code> 的区别。</h2>

<p>是加载脚本的三种方式：
   <img src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/1447848313594-f3efd7fd07305114863ed57d15954a97.jpg" alt="enter image description here" title="">
蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。</p>

<ul>
<li><p><code class=" language-javascript"><span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"script.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span></code></p>

<p>没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。</p></li>
<li><p><code class=" language-javascript"><span class="token operator">&lt;</span>script async src<span class="token operator">=</span><span class="token string">"script.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span></code></p>

<p>有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。</p></li>
<li><p><code class=" language-javascript"><span class="token operator">&lt;</span>script defer src<span class="token operator">=</span><span class="token string">"myscript.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span></code></p>

<p>有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。</p></li>
</ul>

<p><a href="http://segmentfault.com/q/1010000000640869">详细的说明，点这里</a></p>

<h2>Why is it generally a good idea to position CSS &lt;link&gt;s between &lt;head&gt;&lt;/head&gt; and JS &lt;script&gt;s just before &lt;/body&gt;? Do you know any exceptions?为什么通常推荐将 CSS &lt;link&gt; 放置在 &lt;head&gt;&lt;/head&gt; 之间，而将 JS &lt;script&gt; 放置在 &lt;/body&gt; 之前？你知道相关解释吗？</h2>

<p>css放在head中， 是因为浏览器解析html文档是自上而下的，如果放底部的话，页面结构出来了，css还没开始渲染，可能会看到只有结构的页面。CSS 应当写在 head 中，以避免页面元素由于样式确实造成瞬间的白页或者给用户闪烁感。</p>

<p>而js放在<code class=" language-javascript"><span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span></code>之前，是因为JS可能会改变DOM树，也可能依赖css样式。如果放在前面，那么DOM和css可能还未加载，这样容易报错。还有一个，我觉得是加载速度的问题，js放前面，页面会先去加载他，拖慢了时间，使用户在一定时间内看不到网页内容。</p>

<h2>What is progressive rendering?什么是渐进式渲染 (progressive rendering)？</h2>

<p>居然查不到。。。。求大神解释！</p><script src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/tuiku.js"></script>
                </div>
                <div class="entry-meta">
                  <p>本站专栏文章皆为原创，转载请注明出处（带有 前端乱炖 字样）和本文的显式链接(<a href="http://www.html-js.com/article/3279">http://www.html-js.com/article/3279</a>)，本站和作者保留随时要求删除文章的权利！</p>
                </div>
              </div>
            <div class="tip-comments" style="display: none;"><ul class="comment-list"></ul><form class="tip-comment-form"><textarea placeholder="添加讨论…" class="tip-comment-textarea"></textarea><div class="form-control"><button class="tip-submit" type="submit">提交</button></div></form></div></article>
            <div id="comment" class="comment module">
              <div class="hd">评论</div>
              <div class="bd">
                <div class="publish">
                  <textarea id="comment-text" placeholder="参与讨论。支持markdown语法" class="input-block-level"></textarea>
                  <div id="comment-submit" class="btn comment-submit">发表评论</div>
                </div>
                <div class="comment-list">
                  <div class="comment-item clearfix"><a class="headpic"><img data-original="http://tp2.sinaimg.cn/2769629013/50/5718808472/1" width="70" height="70" src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/1" style="display: inline;"></a>
                    <div class="comment-right">
                      <div class="con"><span class="author vcard item"><a rel="author" href="http://www.html-js.com/user/8341" class="value url fn">极昼空间</a>
                          <div class="hd-time">8个月前</div></span>
                        <div class="html"><p>渐进式渲染是指浏览器不用等待所有页面资源都渲染好之后再呈现给用户看，而是边下载边渲染，所以用户打开一个网页的时候往往不能第一时间看到所有的内容，但是能够看到一个大概的样子，后续的内容浏览器会慢慢补上形成一个完整的页面。这个有点像 bigpipe。
这是我查到的，感觉图片流什么的就是用的渐进式渲染</p></div>
                      </div>
                      <div class="time"><a data-nick="极昼空间" class="reply">回复</a></div>
                    </div>
                  </div>
                  <div class="comment-item clearfix"><a class="headpic"><img data-original="http://tp3.sinaimg.cn/2371564754/50/5622805718/1" width="70" height="70" src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/1(1)" style="display: inline;"></a>
                    <div class="comment-right">
                      <div class="con"><span class="author vcard item"><a rel="author" href="http://www.html-js.com/user/4828" class="value url fn">bububearAI</a>
                          <div class="hd-time">9个月前</div></span>
                        <div class="html"><p><a href="http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/">http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/</a></p>

<p>这里讲解了渐进式渲染 <br>
然而并不是很能理解</p></div>
                      </div>
                      <div class="time"><a data-nick="bububearAI" class="reply">回复</a></div>
                    </div>
                  </div>
                  <div class="comment-item clearfix"><a class="headpic"><img data-original="http://tp3.sinaimg.cn/2371564754/50/5622805718/1" width="70" height="70" src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/1(1)" style="display: inline;"></a>
                    <div class="comment-right">
                      <div class="con"><span class="author vcard item"><a rel="author" href="http://www.html-js.com/user/4828" class="value url fn">bububearAI</a>
                          <div class="hd-time">9个月前</div></span>
                        <div class="html"><p><a href="http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/">http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/</a></p>

<p>这里讲解了渐进式渲染 <br>
然而并不是很能理解</p></div>
                      </div>
                      <div class="time"><a data-nick="bububearAI" class="reply">回复</a></div>
                    </div>
                  </div>
                </div>
                <script id="comment-tpl" type="text/template">
                  <div class="comment-item clearfix"><a class="headpic"><img src="{{user_headpic}}" width="70" height="70"></a>
                    <div class="comment-right">
                      <div class="con"><span class="author vcard item"><a rel="author" href="/user/{{user_id}}" class="value url fn">{{user_nick}}：</a></span>
                        <div class="html">{{{html}}}</div>
                      </div>
                      <div class="time">{{createdAt}}<a data-nick="{{user_nick}}" class="reply">回复</a></div>
                    </div>
                  </div>
                </script>
              </div>
            </div>
          </div>
        </div>
        <div class="right"><!--<a target="_blank" href="http://www.oneapm.com/bi/feature.html?utm_source=htmljs&amp;utm_medium=billboard&amp;utm_term=bi&amp;utm_campaign=JulyTechAds&amp;from=maadfisejs" style="width:100%;display:block;margin-top:20px;" class="ad-blank"><img src="http://htmljs.b0.upaiyun.com/uploads/1436597035936-4450bd15970bac6348a570d12c151324.png"></a>-->
          <div style="padding:0;margin-top:20px;" class="module"><img src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/1417158556053-未标题-5.png"></div>
          <div class="writer-and-column clearfix">
            <div class="writer module">
              <div class="hd">WRITTEN BY</div>
              <!--a.head-pic(href="/user/#{writer.id}")-->
              <!--  img(src='#{writer.head_pic}')-->
              <div class="info"><a href="http://www.html-js.com/user/7498" class="nick">体贴的小困</a>
                <div class="desc">一入前端深似海，从此动漫是路人</div><a href="http://weibo.cn/5714749080" target="_blank" class="weibo">TA的新浪微博</a>
              </div>
            </div>
            <div class="column module">
              <div class="hd">PUBLISHED IN</div>
              <div class="info"><a href="http://www.html-js.com/article/column/4623" class="name">记录我的前端成长之路！</a>
                <div class="desc"><p>已经学习前端一个月了，会把每天所学的东西总结。如果有什么错误的话，希望大家指正，也希望能帮助其他新人，谢谢~</p></div>
                <div class="action"><a href="http://www.html-js.com/article/column/1/rss" class="rssit btn small-btn"><i class="rss social"></i> 订阅</a></div>
              </div>
            </div>
          </div>
          <div class="other-articles module">
            <div class="hd">本专栏其他文章</div>
            <div class="bd">
              <div class="item"><a href="http://www.html-js.com/article/3286">【基础性】CSS面试题</a>
                <div class="others"><span class="time">时间:2015-11-20</span><span class="visit_count">浏览:2037</span><span class="zan_count">赞:1</span></div>
              </div>
              <div class="item"><a href="http://www.html-js.com/article/3279">【基础性】HTML面试问题</a>
                <div class="others"><span class="time">时间:2015-11-17</span><span class="visit_count">浏览:1535</span><span class="zan_count">赞:0</span></div>
              </div>
              <div class="item"><a href="http://www.html-js.com/article/3271">【基础性】前端基础知识-CSS向-层叠问题。</a>
                <div class="others"><span class="time">时间:2015-11-15</span><span class="visit_count">浏览:623</span><span class="zan_count">赞:1</span></div>
              </div>
            </div>
          </div>
          <div class="bottom-action module">
            <div class="wrapper">
              <div class="actions"><a href="javascript:void(0);" class="zan action"><i class="icon-thumbs-up"></i><em>赞</em> <span>0</span></a><span class="zanlogs"></span>
              </div>
              <div class="actions"><a target="_blank" href="http://service.weibo.com/share/share.php?url=http%3A%2F%2Fwww.html-js.com%2Farticle%2F3279&amp;title=%E5%88%86%E4%BA%AB%E4%B8%80%E7%AF%87@%E4%BD%93%E8%B4%B4%E7%9A%84%E5%B0%8F%E5%9B%B0%20%E7%9A%84%E5%8E%9F%E5%88%9B%E6%96%87%E7%AB%A0%E3%80%90%E3%80%90%E5%9F%BA%E7%A1%80%E6%80%A7%E3%80%91HTML%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98%E3%80%91%E6%9D%A5%E8%87%AA@%E5%89%8D%E7%AB%AF%E4%B9%B1%E7%82%96%20%E4%B8%93%E6%A0%8F%E3%80%8C%E8%AE%B0%E5%BD%95%E6%88%91%E7%9A%84%E5%89%8D%E7%AB%AF%E6%88%90%E9%95%BF%E4%B9%8B%E8%B7%AF%EF%BC%81%E3%80%8D%20%E3%80%82%E5%89%8D%E7%AB%AF%E4%B9%B1%E7%82%96%E6%98%AF%E4%B8%80%E4%B8%AA%E4%B8%93%E4%B8%9A%E7%9A%84%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E5%8E%9F%E5%88%9B%E5%86%85%E5%AE%B9%E7%A4%BE%E5%8C%BA&amp;pic=http://www.html-js.com/uploads/article_thumb/3279.png&amp;appkey=659341943" class="action"><i class="icon-new-window"></i><em style="background:none !important;float:none;display:inline;padding:0;" class="bds_more">分享到微博</em></a><a href="javascript:void(0);" class="add_fav action"><em>收藏</em> <span>1</span></a>
              </div>
            </div>
          </div>
          <div id="fixed-modules" class="fixed" style="position: fixed; top: 0px;"><a target="_blank" href="http://www.appcan.cn/" style="width:100%;display:block;" class="ad-blank"><img src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/1430307535247-前端乱炖.gif"></a><a target="_blank" href="http://www.jiankongbao.com/" style="width:100%;display:block;" class="ad-blank"><img src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/1461145783134-4e913d3582645ce5b5e12859c8b62b94.jpg"></a>
            <!--a.ad-blank(target="_blank",href="https://coding.net/marketing/codeinsight?hmsr=http%3A%2F%2Fwww.html-js.com%2F&hmmd=%E5%9B%BE%E7%89%87%E5%B9%BF%E5%91%8A&hmpl=CodeInsight&hmkw=&hmci=",style="width:280px;height:120px;display:block;")-->
            <!--  img(src="http://htmljs.b0.upaiyun.com/uploads/1425371986895-coding.png")-->
          </div>
        </div>
      </div>
      <p>
        <script id="bdshare_js" data="type=tools&amp;uid=2555549" src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/bds_s_v2.js"></script>
        
        <script type="text/javascript">
        var bds_config={"bdText":"分享一篇@体贴的小困 的原创文章【【基础性】HTML面试问题】来自@前端乱炖 专栏「记录我的前端成长之路！」 {{前端乱炖是国内最专业的前端知识原创内容社区}}","bdPic":"http://www.html-js.com/uploads/article_thumb/3279.png","snsKey":{'tsina':'659341943','tqq':'','t163':'','tsohu':''}}
        document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
        </script>
      </p>
      <script id="tip_tpl" type="text/template">
        {{#tips}}
          <li class="ng-scope single-comment pin-comment">
            <div class="comment-body ng-binding" >{{content}}</div>
            <div class="comment-meta">
              <span class="author-name ng-binding">— {{user_nick}} </span>
              <time class="create-time" >{{time}}</time>
            </div>
          </li>
          {{/tips}}
      </script>
    </div>
    <script src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/mustache.js"></script>
    <script src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/messageTip.js"></script><div class="message-tip" style="display: none;">欢迎光临</div>
    <script src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/loadingTip.js"></script><div class="loading-tip">正在加载中。。。</div>
    <script src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/lazyload.js"></script>
    <script>
      $(window).scroll(function(){
        if($(window).scrollTop()+$(window).height()>=$(".comment").offset().top){
          $(".comment-layer").addClass("hidden")
        }else{
        $(".comment-layer").removeClass("hidden")
        }
        })
      $(".comment-layer").click(function(){
        $("html,body").animate({
          scrollTop:$(".comment").offset().top-200
          })
        $(".comment textarea").focus()
        })
      var comment_tpl = $("#comment-tpl").html()
      //- loadingTip.show("评论加载中")
      //- $.ajax({
      //-   url:"/comment/article_3279",
      //-   type:"get",
      //-   dataType:"json",
      //-   success:function(data){
      //-     loadingTip.hide("正在提交中")
      //-       if(data.success){
      //-       for(var i=0;i<data.comments.length;i++){
      //-       var comment = data.comments[i]
      //-         var html = Mustache.render(comment_tpl,comment);
      //-         $(".comment-list").append(html)
      //-         $(".reply").click(function(){
      //-   $("#comment-text").val("@"+$(this).attr("data-nick")+" ").focus()
      //-    $("#comment-text")[0].setSelectionRange($("#comment-text")[0].value.length, $("#comment-text")[0].value.length)
      //-   })
      //-       }
      //-       }else{
      //-       alert(data.info)
      //-       }
      
      //-   }
      //-   })
      $(".headpic img").lazyload();
      $(".tooltip-trigger img").lazyload();
      $(".reply").click(function(){
        $("#comment-text").val("@"+$(this).attr("data-nick")+" ").focus()
         $("#comment-text")[0].setSelectionRange($("#comment-text")[0].value.length, $("#comment-text")[0].value.length)
        })
      $("#comment-submit").click(function(){
        var text = $("#comment-text").val();
        if(!text){
          messageTip.show("请输入评论内容");
        }else{
          loadingTip.show("正在提交中")
           HtmlJS.util.ajax("/comment/add",{
              md:text,
              target_id:"article_3279"
           },"post",function(data){
              loadingTip.hide()
                if(data.success){
                $("#comment-text").val("")
                var html = Mustache.render(comment_tpl,data.comment);
                  $(".comment-list").prepend(html)
                }else{
                  alert(data.info)
                }
           },function(){
           
            },null,function(){
            HtmlJS.util.ajax("/comment/add",{
              md:text,
              target_id:"article_3279"
            },"post",function(data){
              loadingTip.hide()
                if(data.success){
                $("#comment-text").val("")
                var html = Mustache.render(comment_tpl,data.comment);
                  $(".comment-list").prepend(html)
                }else{
                  alert(data.info)
                }
            },function(){
            
            },null,function(){
            
          })
          })
        }
        })
        
        $(".zan").click(function(){
          var self = this;
            HtmlJS.util.ajax("/article/3279/zan",{
              score:$(self).attr("data-index")
            },"post",function(data){
              loadingTip.hide()
                if(data.success){
                
                  messageTip.show("成功！")
                    $("em",self).html("已赞")
                    $("span",self).html($("span",self).html()*1+1)
                }else{
                  alert(data.info)
                }
            },function(){
            
            },null,function(){
            HtmlJS.util.ajax("/article/3279/zan",{
              score:$(self).attr("data-index")
            },"post",function(data){
              loadingTip.hide()
                if(data.success){
                  messageTip.show("成功！")
                    $("em",self).html("已赞")
                    $("span",self).html($("span",self).html()*1+1)
                }else{
                  alert(data.info)
                }
            },function(){
            
            },null,function(){
            
          })
          })
          })
          $('.user').tooltip({
          placement:"bottom"
          });
          $(".add_fav").click(function(){
            var self=this;
            HtmlJS.util.ajax("/user/fav",{
              uuid:"b15df280-316f-40fe-a481-c6aaaadd0b2c"
            },"post",function(data){
                loadingTip.hide()
                if(data.success){
                  messageTip.show("收藏成功！")
                    $("em",self).html("已收藏")
                     $("span",self).html($("span",self).html()*1+1)
                }else{
                  alert(data.info)
                }
            },function(){},null,function(){
                HtmlJS.util.ajax("/user/fav",{
                  uuid:"b15df280-316f-40fe-a481-c6aaaadd0b2c"
                },"post",function(data){
                    loadingTip.hide()
                    if(data.success){
                      messageTip.show("收藏成功！")
                         $("em",self).html("已收藏")
                          $("span",self).html($("span",self).html()*1+1)
                    }else{
                      alert(data.info)
                    }
                },function(){
                })
            })
            });
            $(document).ready(function(){
                if($(window).width()>600){
                  new Tip().init({
                      selector:".post",
                      url:"/tip/add",
                      uuid:"3279"
                  })
                }
                
            })
            
    </script>
    <div id="footer">
      <div class="wrapper">
        <div class="module">
          <div style="font-size:12px;line-height:20px;">Power By NodeJS，本站所有代码的地址在<a href="https://github.com/xinyu198736/htmljs" target="_blank">这里</a>  浙ICP备12047043号  <a href="http://www.html-js.com/friendlink">友情链接</a>  <a href="https://f2e.souche.com/blog" target="_blank">大搜车前端团队博客</a></div>
        </div>
      </div>
    </div>
    <div id="coin-fixed"><span id="gotop"><i class="icon-airplane"></i></span><span class="my-favs"><i class="icon-heart"></i><a href="http://www.html-js.com/user/fav"> 我的收藏      </a></span>
    </div>
    <script>
      try{
        $('.tooltip-trigger').tooltip({
              placement:"bottom"
              });
      }catch(e){};
      
      
      
    </script>
    <div class="hidden">
      <script>
        var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
        document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F2fc2fae0509f820259c1760fce28d7d2' type='text/javascript'%3E%3C/script%3E"));
        
      </script><script src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/h.js" type="text/javascript"></script><a href="http://tongji.baidu.com/hm-web/welcome/ico?s=2fc2fae0509f820259c1760fce28d7d2" target="_blank"><img border="0" src="./【基础性】HTML面试问题 - 记录我的前端成长之路！ - 前端乱炖_files/21.gif" width="20" height="20"></a>
    </div>
  
</body></html>